<template>
  <section class="h100 gamepay-panel">
    <van-row class="header-panel">
      加勒比海盗：启航
      <div class="close">
        <van-icon name="cross" />
      </div>
    </van-row>
    <van-row class="tab-panel">
      <van-row class="panel">
        <div
          :class="['item', activeKey === item.value && 'on']"
          v-for="(item, index) in tabs"
          :key="index"
          @click="onChangeTabs(item.value)"
        >
          {{ item.name }}
        </div>
      </van-row>
    </van-row>
    <van-row class="discount-panel">
      <div
        :class="['item', activeKey === 2 && 'disabled']"
        v-for="(item, index) in discountList"
        :key="index"
      >
        <van-row class="panel">
          <van-row class="top">
            <van-row class="money"><span>¥</span>{{ item.money }}</van-row>
            <van-row class="content">
              <p>无门槛优惠券</p>
              <p>满{{ item.money }}可用</p>
            </van-row>
          </van-row>
          <van-row class="date">有效期至:{{ item.date }}</van-row>
        </van-row>
        <van-row class="status">
          <van-row class="btns"
            >{{ activeKey === 2 ? "已" : "可" }}使用</van-row
          >
        </van-row>
      </div>
    </van-row>
  </section>
</template>

<script>
export default {
  data() {
    return {
      activeKey: 1,
      tabs: [
        {
          name: "未使用",
          value: 1,
        },
        {
          name: "已使用",
          value: 2,
        },
      ],
      discountList: [
        {
          money: "6",
          date: "2022-09-05",
        },
        {
          money: "20",
          date: "2022-09-05",
        },
        {
          money: "6",
          date: "2022-09-05",
        },
        {
          money: "20",
          date: "2022-09-05",
        },
      ],
    };
  },
  created() {
    //  this.getLoad();
  },
  methods: {
    //初始化加载
    getLoad() {
      this.$http(
        `/basedata/common/getMenu`,
        { menuType: 1 },
        "get",
        false
      ).then((res) => {});
    },
    //tab切换
    onChangeTabs(key) {
      this.activeKey = key;
    },
  },
};
</script>

<style lang="less">
@import "../../../assets/css/welfare/index.less";
</style>
